<template>
  <div>
    <el-form
      :inline="true"
      :model="form"
      size="small"
      class="searchForm bg-gray flex flex-wp flex-a-c"
    >
      <el-form-item label="设备SN码">
        <el-input v-model="form.snCode"></el-input>
      </el-form-item>
      <el-form-item label="设备型号">
        <el-input v-model="form.audioModel"></el-input>
      </el-form-item>
      <el-form-item label="供应商">
        <el-input v-model="form.supplierName"></el-input>
      </el-form-item>
      <el-form-item label="代理手机号">
        <el-input v-model="form.agentPhone"></el-input>
      </el-form-item>

      <el-button icon="el-icon-search" @click="search()" size="small"
        >查询</el-button
      >
      <el-button @click="exportExcel()" size="small">导出</el-button>
      <el-button
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="showModal()"
        >新增音响设备</el-button
      >
    </el-form>
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 + (pageInfo.pageindex - 1) * pageInfo.pagesize }}
        </template>
      </el-table-column>
      <el-table-column prop="snCode" label="设备SN码" align="center">
      </el-table-column>
      <el-table-column
        prop="audioModel"
        label="设备型号"
        align="center"
      ></el-table-column>
      <el-table-column prop="num" label="码牌绑定数量" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="showTable(scope.row)">{{
            scope.row.num
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="mercNo" label="商户编号" align="center">
      </el-table-column>
      <el-table-column prop="agentPhone" label="代理手机号" align="center">
      </el-table-column>
      <el-table-column prop="supplierName" label="供应商" align="center">
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="200">
        <template slot-scope="scope">
          {{ new Date(scope.row.addTime).Format('YYYY-MM-DD hh:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.mercName"
            size="mini"
            type="primary"
            round
            @click="unBind(scope.row)"
            >音响解绑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="text-c margin-t-d">
      <el-pagination
        @current-change="getDataList"
        :current-page.sync="pageInfo.pageindex"
        :page-size="pageInfo.pagesize"
        background
        layout="total,prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="新增音响设备"
      :visible.sync="commentVisible"
    >
      <p style="line-height: 30px">
        请先下载Excel样式表格，按照表格的字段填写数据
      </p>
      <div>
        <el-button icon="el-icon-document" @click="downLoadExcel"
          >下载表格</el-button
        >
      </div>
      <p style="line-height: 30px">请将填写好的Excel表格上传到系统</p>
      <el-upload
        class="upload-demo"
        drag
        action="string"
        :headers="{ token: $store.state.userInfo.token }"
        :http-request="UploadImage"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <div slot="footer" class="dialog-footer text-c">
        <el-button size="small" round @click="submit()">提 交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="码牌列表"
      :visible.sync="tableCommentVisible"
    >
      <el-table
        border
        ref="mapaiTable"
        :data="mapaiTableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column label="序号" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="qrCode" label="码牌编号" align="center">
        </el-table-column>
        <el-table-column label="绑定时间" align="center" width="200">
          <template slot-scope="scope">
            {{ new Date(scope.row.addTime).Format('YYYY-MM-DD hh:mm:ss') }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        snCode: '',
        audioModel: '',
        agentPhone: '',
        supplierName: '',
      },
      qdForm: {},
      pageInfo: {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      }, //页码
      loading: false,
      tableData: [], //表格数据
      mapaiTableData: [], //码牌数据
      commentVisible: false,
      tableCommentVisible: false,
      modalData: {
        num: 0,
        tokerUserId: '',
      },
      options: [],
    }
  },

  beforeMount() {
    this.search()
  },
  methods: {
    showModal() {
      this.modalData = {
        num: 0,
        tokerUserId: '',
      }
      this.commentVisible = true
    },
    submit() {
      this.commentVisible = false
      this.getDataList()
    },
    search() {
      this.qdForm = {
        ...this.form,
      }
      this.pageInfo = {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      } //页码
      this.getDataList()
    },

    getDataList() {
      let params = {
        pageNum: this.pageInfo.pageindex,
        pageSize: this.pageInfo.pagesize,
        ...this.qdForm,
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$ajax
        .getData('adm/audio/device/page', params)
        .then((data) => {
          loading.close()
          this.tableData = data.resData.data
          this.pageInfo.total = data.resData.count
        })
        .catch((error) => {
          loading.close()
          this.$message({
            message: error.codeDes || error.message,
            type: 'error',
          })
        })
    },
    showTable(data) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$ajax
        .getData('adm/audio/device/qrCodePage', { id: data.id })
        .then((data) => {
          loading.close()
          this.mapaiTableData = data.resData
          this.tableCommentVisible = true
        })
        .catch((error) => {
          loading.close()
          this.$message({
            message: error.codeDes || error.message,
            type: 'error',
          })
        })
    },
    UploadImage(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      const loading = this.$loading({
        lock: true,
        text: '正在上传...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$ajax
        .postFormData('adm/audio/device/import', { file: param.file })
        .then((data) => {
          loading.close()
          param.onSuccess() // 上传成功的图片会显示绿色的对勾
          // this.tableData = data.resData.data;
          // this.pageInfo.total = data.resData.count;
        })
        .catch((error) => {
          loading.close()
          this.$message({
            message: error.codeDes || error.message,
            type: 'error',
          })
          param.onError()
        })
    },

    exportExcel() {
      let params = {
        ...this.qdForm,
      }
      const loading = this.$loading({
        lock: true,
        text: '正在导出...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$ajax
        .getFileData('adm/audio/device/export', params)
        .then((data) => {
          loading.close()
          // this.tableData = data.resData.data;
          // this.pageInfo.total = data.resData.count;
        })
        .catch((error) => {
          loading.close()
          this.$message({
            message: error.codeDes || error.message,
            type: 'error',
          })
        })
    },
    download(res, type, filename) {
      // 创建blob对象，解析流数据
      const blob = new Blob([res], {
        // 设置返回的文件类型
        type: type,
      }) // 这里就是创建一个a标签，等下用来模拟点击事件
      const a = document.createElement('a') // 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载
      const URL = window.URL || window.webkitURL // 根据解析后的blob对象创建URL 对象
      const herf = URL.createObjectURL(blob) // 下载链接
      a.href = herf // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
      a.download = filename
      document.body.appendChild(a) // 点击a标签，进行下载
      a.click() // 收尾工作，在内存中移除URL 对象
      document.body.removeChild(a)
      window.URL.revokeObjectURL(herf)
    },
    downLoadExcel() {
      const a = document.createElement('a') // 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载
      a.href =
        'https://le-code.oss-cn-hangzhou.aliyuncs.com/basic/5/81047d7fca444b2bb91ce9ce60e46756.xlsx' // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
      document.body.appendChild(a) // 点击a标签，进行下载
      a.click() // 收尾工作，在内存中移除URL 对象
      document.body.removeChild(a)
    },
    unBind(item) {
      this.$confirm(`确认解绑该音响设备码?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })
          this.$ajax
            .postFormData('adm/audio/device/unbind', { id: item.id })
            .then((data) => {
              loading.close()
              this.$message({
                type: 'success',
                message: '解绑成功',
              })
              this.getDataList()
            })
            .catch((error) => {
              loading.close()
              this.$message({
                message: error.codeDes || error.message,
                type: 'error',
              })
            })
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>
